{% extends 'base_dashboard.html' %}

{% block title %}{{ action }} — Online LMS{% endblock %}

{% block extra_css %}
<style>
  .acf-section {
    font-size: .78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: #1a56db;
    display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; margin-top: .25rem;
  }
  .acf-section::after { content: ''; flex: 1; height: 1px; background: #e5e7eb; }
  .acf-tip {
    border-radius: .75rem; padding: .875rem 1rem;
    border-left: 3px solid currentColor;
    font-size: .8rem; line-height: 1.5;
  }
  #thumbnailPreview { display: none; max-height: 180px; width: 100%; object-fit: cover;
    border-radius: .625rem; border: 1px solid #e5e7eb; }
  .acf-status-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3em .8em; border-radius: 2rem; font-size: .78rem; font-weight: 600;
  }
</style>
{% endblock %}

{% block content %}
<!-- Page header -->
<div class="d-flex justify-content-between align-items-start mb-4">
    <div>
        <h4 class="fw-bold mb-1">{{ action }}</h4>
        <p class="text-muted small mb-0">Fill in the details below to {% if 'Edit' in action %}update this{% else %}create a new{% endif %} course</p>
    </div>
    <a href="{% url 'dashboard:manage_courses' %}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-arrow-left me-1"></i>Back to Courses
    </a>
</div>

<form method="post" enctype="multipart/form-data" id="courseForm">
{% csrf_token %}
{% if form.non_field_errors %}
<div class="alert alert-danger rounded-3 small mb-3">
    {% for error in form.non_field_errors %}<div>{{ error }}</div>{% endfor %}
</div>
{% endif %}

<div class="row g-4 align-items-start">

    <!-- ── Left: main form ───────────────────────────────── -->
    <div class="col-lg-8">

        <!-- Basic Information -->
        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-body p-4">
                <div class="acf-section"><i class="bi bi-info-circle"></i>Basic Information</div>
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label fw-medium small">Course Title <span class="text-danger">*</span></label>
                        {{ form.title }}
                        {% if form.title.errors %}<div class="text-danger small mt-1">{{ form.title.errors|join:", " }}</div>{% endif %}
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-medium small">Category</label>
                        {{ form.category }}
                        <div class="form-text small">Used to group and filter courses.</div>
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-medium small">Short Description <span class="text-danger">*</span></label>
                        {{ form.short_description }}
                        {% if form.short_description.errors %}<div class="text-danger small mt-1">{{ form.short_description.errors|join:", " }}</div>{% endif %}
                        <div class="form-text small">A brief overview shown on course listings.</div>
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-medium small">Full Description <span class="text-danger">*</span></label>
                        {{ form.full_description }}
                        {% if form.full_description.errors %}<div class="text-danger small mt-1">{{ form.full_description.errors|join:", " }}</div>{% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Pricing & Schedule -->
        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-body p-4">
                <div class="acf-section"><i class="bi bi-calendar-week"></i>Pricing &amp; Schedule</div>
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label fw-medium small">Price ({{ site_settings.currency_symbol }})</label>
                        <div class="input-group">
                            <span class="input-group-text">{{ site_settings.currency_symbol }}</span>
                            {{ form.price }}
                        </div>
                        {% if form.price.errors %}<div class="text-danger small mt-1">{{ form.price.errors|join:", " }}</div>{% endif %}
                        <div class="form-text small">Enter 0 for a free course.</div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-medium small">Duration <span class="text-danger">*</span></label>
                        {{ form.duration }}
                        {% if form.duration.errors %}<div class="text-danger small mt-1">{{ form.duration.errors|join:", " }}</div>{% endif %}
                        <div class="form-text small">e.g. &ldquo;8 weeks&rdquo; or &ldquo;40 hours&rdquo;</div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-medium small">Status <span class="text-danger">*</span></label>
                        {{ form.status }}
                        {% if form.status.errors %}<div class="text-danger small mt-1">{{ form.status.errors|join:", " }}</div>{% endif %}
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-medium small">Start Date</label>
                        {{ form.start_date }}
                        {% if form.start_date.errors %}<div class="text-danger small mt-1">{{ form.start_date.errors|join:", " }}</div>{% endif %}
                        <div class="form-text small">Enrollment opens from this date.</div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-medium small">End Date</label>
                        {{ form.end_date }}
                        {% if form.end_date.errors %}<div class="text-danger small mt-1">{{ form.end_date.errors|join:", " }}</div>{% endif %}
                        <div class="form-text small">Course closes on this date.</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Assign Teachers -->
        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-body p-4">
                <div class="acf-section"><i class="bi bi-person-video3"></i>Assign Instructors</div>
                <div class="border rounded-3 p-3" style="background:#fafafa;max-height:220px;overflow-y:auto;">
                    {{ form.teachers }}
                </div>
                {% if form.teachers.errors %}<div class="text-danger small mt-1">{{ form.teachers.errors|join:", " }}</div>{% endif %}
                <div class="form-text small">Hold <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> to select multiple instructors.</div>
            </div>
        </div>

        <!-- Growth / marketing -->
        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-body p-4">
                <div class="acf-section"><i class="bi bi-megaphone"></i>Growth &amp; marketing</div>
                <div class="row g-3">
                    <div class="col-12">
                        <div class="form-check form-switch">
                            {{ form.is_featured }}
                            <label class="form-check-label fw-semibold" for="{{ form.is_featured.id_for_label }}">Featured on home page</label>
                        </div>
                        <div class="form-text small">{{ form.is_featured.help_text }}</div>
                    </div>
                    <div class="col-12">
                        <div class="form-check form-switch">
                            {{ form.enable_free_diagnostic }}
                            <label class="form-check-label fw-semibold" for="{{ form.enable_free_diagnostic.id_for_label }}">Enable Free skill check (no login)</label>
                        </div>
                        <div class="form-text small">{{ form.enable_free_diagnostic.help_text }}</div>
                        <div class="acf-tip text-primary mt-2" style="background:#eff6ff;color:#1d4ed8;">
                            <strong>How it works:</strong> Visitors take a short 12-question quiz without logging in,
                            then enter email/WhatsApp to see their score (lead capture).
                            Import &amp; verify questions via <strong>Data Manager → Course questions</strong>
                            (or Django admin → Course questions → Import).
                            Turn this switch <strong>off</strong> to hide the button on the course page.
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Action buttons -->
        <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary px-4 fw-semibold">
                <i class="bi bi-check-circle me-2"></i>{{ action }}
            </button>
            <a href="{% url 'dashboard:manage_courses' %}" class="btn btn-outline-secondary px-4">Cancel</a>
        </div>
    </div>

    <!-- ── Right: sidebar ────────────────────────────────── -->
    <div class="col-lg-4">

        <!-- Thumbnail upload -->
        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-body p-4">
                <div class="acf-section"><i class="bi bi-image"></i>Course Thumbnail</div>

                {% if form.instance.thumbnail %}
                <div class="mb-3">
                    <img src="{{ form.instance.thumbnail.url }}" id="thumbnailPreview"
                         style="display:block;" alt="Current thumbnail">
                    <div class="form-text small mt-1">Upload a new image to replace.</div>
                </div>
                {% else %}
                <div class="rounded-3 d-flex align-items-center justify-content-center mb-3"
                     id="thumbnailPlaceholder"
                     style="height:160px;background:#f0f4ff;border:2px dashed #bfdbfe;">
                    <div class="text-center">
                        <i class="bi bi-image" style="font-size:2.5rem;color:#1a56db;opacity:.4;"></i>
                        <div class="small text-muted mt-1">Preview will appear here</div>
                    </div>
                </div>
                <img id="thumbnailPreview" src="" alt="Preview">
                {% endif %}

                {{ form.thumbnail }}
                {% if form.thumbnail.errors %}<div class="text-danger small mt-1">{{ form.thumbnail.errors|join:", " }}</div>{% endif %}
            </div>
        </div>

        <!-- Status legend -->
        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-body p-4">
                <div class="acf-section"><i class="bi bi-toggles"></i>Status Guide</div>
                <div class="d-flex flex-column gap-2">
                    <div class="acf-tip" style="background:#dcfce7;color:#15803d;border-color:#15803d;">
                        <strong>Published</strong> — Visible to students &amp; open for enrollment.
                    </div>
                    <div class="acf-tip" style="background:#f3f4f6;color:#374151;border-color:#9ca3af;">
                        <strong>Draft</strong> — Hidden from students. Safe to edit before going live.
                    </div>
                </div>
            </div>
        </div>

        <!-- Tips -->
        <div class="card border-0 rounded-4 mb-4" style="background:#eff6ff;">
            <div class="card-body p-4">
                <div class="fw-semibold small text-primary mb-2"><i class="bi bi-lightbulb me-1"></i>Tips</div>
                <ul class="mb-0 ps-3 small text-muted" style="line-height:1.8;">
                    <li>Use a clear, keyword-rich title.</li>
                    <li>Short description appears on course cards — keep it under 120 chars.</li>
                    <li>Thumbnail: 16:9 ratio, at least 800×450px.</li>
                    <li>Set status to <em>Draft</em> while building; publish when ready.</li>
                </ul>
            </div>
        </div>
    </div>

</div>
</form>
{% endblock %}

{% block extra_js %}
<script>
// Live thumbnail preview
(function () {
    var inp = document.querySelector('input[type="file"][name="thumbnail"]');
    var preview = document.getElementById('thumbnailPreview');
    var placeholder = document.getElementById('thumbnailPlaceholder');
    if (!inp || !preview) return;
    inp.addEventListener('change', function () {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                preview.src = e.target.result;
                preview.style.display = 'block';
                if (placeholder) placeholder.style.display = 'none';
            };
            reader.readAsDataURL(this.files[0]);
        }
    });
})();
</script>
{% endblock %}